<template>
    <div class="cd1">
        <nav-bar></nav-bar>
        <div>
        <div>
            <div v-if="item.pl" style=" padding-bottom:0.3rem;margin-bottom:0.5rem;border-bottom:1px solid black" v-for="(item,i) in com" :key="i">
            <van-image style="float:left"
  round
  width="1rem"
  height="1rem"
  :src="`${item.uimg}`"
/>
<div class="cd3">{{item.username}}</div>
<div style="font-size:0.3rem;margin-left:1.3rem;">{{item.account}}</div>

<div class="cd2">{{item.pl}}</div>
</div>

        </div>
       <van-tabbar v-model="active" fixed placeholder>
        <van-tabbar-item to="/" name="home" icon="home-o">首页</van-tabbar-item>
        <van-tabbar-item to="/fl?id=0" name="find" icon="search" dot>分类</van-tabbar-item>
        <van-tabbar-item  name="com" icon="friends-o" badge="5">社区</van-tabbar-item>
        <van-tabbar-item to="/me" name="me" icon="manager-o">个人中心</van-tabbar-item>
        </van-tabbar>
        </div>
    </div>
</template>
<script>
import NavBar from '../components/db.vue'
export default {
    name:'home',
    components:{
        NavBar
    },
    data() {
        return {
            active:'com',
            com:'',
        }
    },
    mounted(){
        this.axios.get('/com').then((result)=>{
            console.log(result.data.result);
            this.com=result.data.result
        })
    }
}
</script>
<style scoped>
.cd1{
    height: 750px;
    background-color:#1b2838 ;
}
.cd2{
    z-index: 1111;
    background-color:#1b2838 ;

    font-size: 0.3rem;
    color: #ACB2B8;
    margin-left: 0.3rem;
    margin-right: 0.1rem;
    white-space:normal;
    word-break:break-all;
    word-wrap:break-word;
         
}
.cd3{   
    
    width: 1.1rem;
    left: 0;
    
    font-size: 0.3rem;  
    color: #C1DBF4;
    left: 0.2rem;
    text-align: center;
    background-color:#1b2838 ;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/deep/ .van-tabbar{
  background-color: rgb(23, 26, 33);
}
.van-tabbar-item--active{
    background-color: rgb(23, 26, 33);
}
</style>